<template>
<div class="login" @keydown.enter="handleSubmit">
	<div class="login_bg"></div>
	<div class="login-con">
	
		<div class="login_box">
			<div class="head_line"></div>
			<div class="login_head" style="text-align:center;">
				<div class="logo_box">
					<!--img src="./../../assets/images/logo.png" v-if="sys_logo!=''"-->
					<img :src="sys_logo" v-if="sys_logo!=''">
				</div>
				<h3>{{sys_name}}</h3>
			</div>
			<div class="form-con">
				<Form ref="loginForm" :model="form" :rules="rules">
					<FormItem prop="userName">
						<Input v-model="form.userName" placeholder="请输入用户名">
							<span slot="prepend">
								<i class="fa fa-user" aria-hidden="true" style="font-size:18px;"></i>
							</span>
						</Input>
					</FormItem>
					<FormItem prop="password">
						<Input type="password" v-model="form.password" placeholder="请输入密码">
							<span slot="prepend">
								<i class="fa fa-lock" aria-hidden="true" style="font-size:18px;"></i>
							</span>
						</Input>
					</FormItem>
					<FormItem prop="verf_code">
						<Row>
							<Col span="16">
								<Input type="text" v-model="form.verf_code" placeholder="请输入验证码">
									<span slot="prepend">
										<i class="fa fa-lock" aria-hidden="true" style="font-size:18px;"></i>
									</span>
								</Input>
							</Col>
							<Col span="8">
								<img :src="verf.img" @click="get_verf_code_image()">
							</Col>
						</Row>
					</FormItem>
					<FormItem v-if="login_err!=''">
						<div>{{login_err}}</div>
					</FormItem>
					<FormItem>
						<Button @click="handleSubmit" type="primary" long style="background: #33444c;border-color: #33444c;">登录</Button>
					</FormItem>
				</Form>
			</div>
		</div>
	</div>
</div>
</template>

<script>
import Wcore from '@/libs/common';
export default {
    data () {
        return {
            form: {
                userName: '',
                password: '',
				verf_code:''
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
				verf_code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ]
            },
			login_err:'',
			verf:{
				code:'',
				img:''
			},
			sys_name:'安华理达记账系统',
			sys_logo:''
        };
    },
	created(){
		this.load_data();
		this.get_verf_code_image();
	},
    methods: {
		load_data(){
			var self = this;
			var postdata = {
				
			};
			Whttp.load('Admin/Login/get_config',postdata,function(result){
				self.sys_name = result['sys_name'];
				self.sys_logo = result['sys_logo'];
			});
			
			
		},
        handleSubmit () {
			let self = this;
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
					self.login();
                }
            });
        },
		login(){
			var self = this;
			var postdata = {
				username:this.form.userName,
				password:this.form.password,
				verf_token:this.verf.code,
				verf_code:this.form.verf_code
			};
			Whttp.load('Admin/Login/login',postdata,function(result){
			
				Wcore.setData(Wcore.prefix('token'),result.token);
				self.$store.commit('SET_USER',result.info);
				Wcore.setData('setMaxMoney',result.max_money);
				
				setTimeout(function(){
					self.$router.push({name:'home_index'});
				},500);
				
				
			},function(result){
				//alert(result.message);
				
				self.login_err = result.message;
			});
		},
		get_verf_code_image(){
			var self = this;
			
			Whttp.load('Admin/Login/get_verycode',{},function(result){
				self.verf = result;
			});
		}
    }
};
</script>

<style scoped >

    @import './login.css';
</style>